<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="日期">
          <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" @change="changeDate"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24" style="text-align: left">
      <el-button>
        <router-link :to="{path:'/manage/advertisementInfo'}"> 添加广告宝</router-link>
      </el-button>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
        <!-- <el-table-column prop="id" label="id"></el-table-column> -->
        <el-table-column prop="eventTime" label="日期">
          <template slot-scope="scope">{{ scope.row.eventTime }}</template>
        </el-table-column>
        <el-table-column prop="bronze" label="青铜"></el-table-column>
        <el-table-column prop="silver" label="白银"></el-table-column>
        <el-table-column prop="gold" label="黄金"></el-table-column>
        <el-table-column prop="platinum" label="铂金"></el-table-column>
        <el-table-column prop="diamond" label="钻石"></el-table-column>
        <el-table-column prop="readBonus" label="阅读分红"></el-table-column>


        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">
              <router-link :to="{name:'advertisementInfo',query:{id:scope.row.id}}"> 编辑</router-link>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination"></div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.currentPage"
        :page-sizes="[10,20,30,40,50]" :page-size="pageInfo.size" layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>
    </el-col>
  </el-row>
</template>
<script>
  import {
    getAdvertisementPageList,
    delAdvertisement,
    saveAdvertisement
  } from '@/api/service'
  export default {
    data() {
      return {
        value: '',
        formInline: {
          beginTime: "",
          endTime: "",
        },
        pageInfo: {
          page: 1,
          size: 10,
          total: 0,
        },
        tableData: [],
        multipleSelection: [],
      };
    },
    mounted() {
      this.search();
    },
    methods: {
      search() {
        getAdvertisementPageList(Object.assign(this.formInline,this.pageInfo)).then(res => {
          this.tableData = res.data.content;
          this.pageInfo.page = res.data.page;
          this.pageInfo.total = res.data.total;
          this.pageInfo.size = res.data.size;
        })
      },
      onSubmit() {
        console.log("submit!");
        this.search();
      },
      changeDate() {
        console.log(this.formInline,this.value[1]);
        this.formInline.beginTime=this.dateFormat(this.value[0]);
         this.formInline.endTime=this.dateFormat(this.value[1]);
      },
      dateFormat:(args)=>{
            let fmt="YYYY-mm-dd"
            let ret;
            if(args){
              let  date=new Date(args)
                 const opt = {
                "Y+": date.getFullYear().toString(),        // 年
                "m+": (date.getMonth() + 1).toString(),     // 月
                "d+": date.getDate().toString(),            // 日
                "H+": date.getHours().toString(),           // 时
                "M+": date.getMinutes().toString(),         // 分
                "S+": date.getSeconds().toString()          // 秒
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                };
            };
            return fmt;
            }else{
              return "";
            }
       },

      handleSizeChange(val) {
        console.log(val);
        this.pageInfo.size = val;
        this.search();
      },
      handleCurrentChange(val) {
        console.log(val);
        this.pageInfo.page = val;
        this.search();
      }
    },
  };
</script>
<style lang="less" scoped>
  .demo-form-inline {
    text-align: left;
  }

  .pagination {
    margin: 15px auto;
  }
</style>
